<template>
    <div>
        <detail-banner :sightName="sightName" :bannerImg="bannerImg" :bannerImgs="gallaryImgs" />
        <DetailHeader/>
        <detail-list :list="list"/>
        <div class="content"></div>
    </div>
</template>

<script>
    import DetailBanner from "../components/detil/banner";
    import DetailHeader from "../components/detil/header";
    import DetailList from "../components/detil/List";
    import axios from 'axios';
    export default {
        name: "Detail",
        components: {DetailList, DetailHeader, DetailBanner},
        comments:{
            DetailBanner,
        },
        data () {
            return {
                sightName: '',
                bannerImg: '',
                gallaryImgs: [],
                list: []
            }
        },
        methods:{
            getDetailInfo(){
                axios.get('/detail.json',{
                    params:{
                        id:this.$route.params.id,
                    }
                }).then(this.getDetailInfoSucc);
            },
            getDetailInfoSucc(res){
                res=res.data;
                if(res.data&&res.ret){
                    const data=res.data;
                    this.sightName = data.sightName;
                    this.bannerImg = data.bannerImg;
                    this.gallaryImgs = data.gallaryImgs;
                    this.list = data.categoryList;
                }
            },
        },
        mounted() {
           this.getDetailInfo()
        },

    }
</script>
<style lang="stylus" scoped>
     .content
        height :50rem
</style>
